<template>
  <div class="detail" style="height:1000px;width: 1200px;margin: 0 auto">
    <el-carousel indicator-position="outside" height="313px" width="1000px">
      <el-carousel-item v-for="b in bannerArr">
        <img :src="b.imgUrl" width="100%">
      </el-carousel-item>
    </el-carousel>
    <el-row>
        <el-col span="18">
          <el-avatar :size="80" :src="c.userImgUrl" style="margin:6px 0 0 40px;"></el-avatar>
          <span style="font-size: 15px;margin-left: 50px;color:#ff6e6e">{{c.nickName}}</span>
          <i style="font-size:15px;margin-left: 50px;" class="el-icon-bell">  {{c.createTime}}</i>
          <i style="font-size:15px;margin-left: 50px;" class="el-icon-view">  {{c.viewCount}}</i>
          <i v-if="userId==c.userId" @click="loadContentDelete" style="font-size:15px;margin-left: 40px;" class="el-icon-delete"></i>
          <p style="margin-top:50px;text-align: center;">{{c.title}}</p>
          <img src="https://lutu-image-1318294981.cos.ap-shanghai.myqcloud.com/title%2Ftitle10.png" style="margin:-40px 0 0 50px;">
          <el-card >
            <p v-html="c.content"></p>
            <el-divider></el-divider>
              <!--评论列表开始-->
              <el-row v-for="(co,index) in commentArr" style="margin: 8px 0">
                <el-col span="2">
                  <el-avatar :src="co.userImgUrl"></el-avatar>
                </el-col>
                <el-col span="2">
                  <p style="color: orange;font-weight: bold;margin: 5px 0;">{{co.nickname}}:</p>
                </el-col>
                <el-col span="15">
                  <p style="margin: 5px 0">{{co.content}}</p>
                  <p style="color: #666;font-size: 12px;margin: 0;padding: 0;">{{co.createTime}}</p>
                </el-col>
                <el-col span="1">
                  <i v-if="userId==co.userId"  @click="deleteComment(index)" style="font-size:13px;margin-top: 20px;" class="el-icon-delete"></i>
                </el-col>
              </el-row>
              <!--评论列表结束-->
              <p>说说你的想法吧...</p>
              <el-row gutter="20">
                <el-col span="20">
                  <el-input type="textarea"
                            v-model="comment.content"
                            :autosize="{ minRows: 1, maxRows: 2}"
                            maxlength="255"
                            show-word-limit
                            placeholder="说点儿啥..."></el-input>
                </el-col>
                <el-col span="2">
                  <el-button size="medium" type="primary" @click="post()">发布评论</el-button>
                </el-col>
              </el-row>
            </el-card>
        </el-col>
        <el-col span="6" style="height:500px;">
          <img @click="loadContentCollect" style="font-size:30px;margin-left: 100px;margin-top: 30px;" :src="icon" width="30px" height="30px" />
          <img @click="loadContentUp" style="font-size:30px;margin-left: 100px;margin-top: 30px;" :src="icon2" width="28px" height="28px" />
          <el-card style="margin:10px 0">
            <h3>作者其它文章</h3>
            <el-divider></el-divider>
            <!--文章列表开始-->
            <el-row gutter="10" v-for="oth in othersArr">
              <el-col span="10">
                <a :href="'/detail?id='+oth.id">
                  <img :src="oth.contentImgUrl" width="100%" height="70px">
                </a>
              </el-col>
              <el-col span="14">
                <a :href="'/detail?id='+oth.id">
                <p class="title_p" style="margin: 0;color: black;font-weight: bold;text-align: left">{{oth.title}}</p>
                <i class="el-icon-time" style="color: #666;font-size: 12px;">{{oth.createTime}}</i>
                </a>
              </el-col>
            </el-row>
            <el-pagination
                @current-change="changePage"
                layout="total, prev, pager, next"
                :hide-on-single-page="true"
                :page-size="pageSize"
                :current-page="currentPage"
                :total="total">
            </el-pagination>
            <!--文章列表结束-->
          </el-card>
        </el-col>
      </el-row>
  </div>
</template>

<script>
export default {
  name: "PostDetailView.vue",
  data: function () {
    return {
      icon: '',
      icon2:'',
      comment: {
        articleId: '',
        content: '',
        id: ""
      },
      c: {
        userImgUrl: "",
        nickName: "",
        createTime: "",
        viewCount: "",
        id: '',
        content: "",
        title: "",
        userId: "",
        isCollect:'',
        isUp:''
      },
      b: {
        userId: "",
        articleId: ""
      },
      up: {
        userId: "",
        articleId: ""
      },
      commentArr: [],
      bannerArr: [],
      othersArr: [],
      // 分页相关数据
      currentPage: 1,
      pageSize: '',
      total: '',
      userId: localStorage.getItem('id'),
      like: 'https://lutu-image-1318294981.cos.ap-shanghai.myqcloud.com/collect%2Fcollect.png',
      dislike:'https://lutu-image-1318294981.cos.ap-shanghai.myqcloud.com/collect%2Fdiscollect.png',
      fav:'https://lutu-image-1318294981.cos.ap-shanghai.myqcloud.com/collect%2Fup.png',
      disFav:'https://lutu-image-1318294981.cos.ap-shanghai.myqcloud.com/collect%2Funup.png'
    }
  },
  methods: {
    post() {
      //设置被评论的内容id
      this.comment.articleId = this.c.id;
      console.log(this.comment.articleId)
      console.log(this.comment.content)
      let formdata = this.qs.stringify(this.comment);
      this.axios
          .create({
            'headers': {
              'Authorization': localStorage.getItem('localJwt')
            }
          })
          .post("http://localhost:8080/v1/comments/post", formdata).then((response) => {
        if (response.data.code == 1) {
          alert("评论完成!");
          location.reload();
        } else {
          this.$message.error(response.data.msg);
          setTimeout(()=>{
            this.$router.push("/login")
          },1000)
        }
      })
    },
    loadCommentList() {
      //发请求获取评论
      console.log(this.c.id)
      let id = new URLSearchParams(location.search).get("id");
      this.axios
          .create({
            'headers': {
              'Authorization': localStorage.getItem('localJwt')
            }
          })
          .get("http://localhost:8080/v1/comments/list/" + id).then((response) => {
        if (response.data.code == 1) {
          this.commentArr = response.data.data;
        }
      })
    },
    loadContentDetail() {
      let id = new URLSearchParams(location.search).get("id");
      let userId = localStorage.getItem('id');
      let url = "";
      if(userId==null){
        url ="http://localhost:8080/v1/contents/detail?id="+id;
      }else{
        url ="http://localhost:8080/v1/contents/detail?id="+id+"&userId="+userId;
      }

      console.log(id)
      this.axios.create({
        'headers': {
          'Authorization': localStorage.getItem('localJwt')
        }
      })
          .get(url).then((response) => {
        if (response.data.code == 1) {
          this.c = response.data.data;
          if(this.c.isCollect == 1){
            this.icon = this.like
          }else{
            this.icon = this.dislike
          };

          if(this.c.isUp == 1){
            this.icon2 = this.fav
          }else{
            this.icon2 = this.disFav
          };
        }
        this.OtherContent();
      })
    },
    loadContentCollect() {
      this.b.articleId = this.c.id;
      this.b.userId = localStorage.getItem('id');
      let formdata = this.qs.stringify(this.b);
      console.log(formdata)
        this.axios.create({
          'headers': {
            'Authorization': localStorage.getItem('localJwt')
          }
        })
            .post("http://localhost:8080/v1/contents/collect", formdata).then((response) => {
          if (response.data.code == 1) {
            if(this.icon == this.dislike){
              this.$message.success("收藏成功!")
            }else{
              this.$message.success("取消收藏成功!")
            }
            this.icon = this.icon == this.like ? this.dislike : this.like;
            console.log(response.data.data)
          } else {
            this.$message.error(response.data.msg);
            setTimeout(()=>{
              if(this.$router.currentRoute.path.includes("/login")){
                location.reload()
              }else{
                this.$router.push("/login")
              }
            },1000)
          }
        })
      },
    loadContentUp() {
      this.up.articleId = this.c.id;
      this.up.userId = localStorage.getItem('id');
      let formdata = this.qs.stringify(this.up);
      console.log(formdata)
      this.axios.create({
        'headers': {
          'Authorization': localStorage.getItem('localJwt')
        }
      })
          .post("http://localhost:8080/v1/contents/up", formdata).then((response) => {
        if (response.data.code == 1) {
          if(this.icon2 == this.disFav){
            this.$message.success("点赞成功!")
          }else{
            this.$message.success("取消点赞成功!")
          }
          this.icon2 = this.icon2 == this.fav ? this.disFav : this.fav;
          console.log(response.data.data)
        } else {
          this.$message.error(response.data.msg);
          setTimeout(()=>{
            if(this.$router.currentRoute.path.includes("/login")){
              location.reload()
            }else{
              this.$router.push("/login")
            }
          },1000)
        }
      })
    },
    loadContentDelete() {
      console.log(this.c.id)
      let id = new URLSearchParams(location.search).get("id");

      this.axios.create({
        'headers': {
          'Authorization': localStorage.getItem('localJwt')
        }
      })
          .post("http://localhost:8080/v1/contents/" + id + "/delete").then((response) => {
        if (response.data.code == 1) {
          this.$message.success("删除成功!")
          location.href = "/community";
          console.log(response.data.data)
        }
      })
    },
    deleteComment(index) {
      console.log(index)
      console.log(this.commentArr[index])
      let id = this.commentArr[index].id
      console.log(id)
      this.axios.create({
        'headers': {
          'Authorization': localStorage.getItem('localJwt')
        }
      })
          .post("http://localhost:8080/v1/comments/delete?id=" + id).then((response) => {
        if (response.data.code == 1) {
          location.reload();
          this.$message.success("删除成功!")
        }
      })
    },
    OtherContent() {
      //请求当前文章作者其它内容
      let userId = this.c.userId
      let page = this.currentPage;
      console.log("userid=" + userId);
      let url = "http://localhost:8080/v1/contents/others?page="+page+"&userId="+userId;

      this.axios
          .create({
            'headers': {
              'Authorization': localStorage.getItem('localJwt')
            }
          })
          .get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.code == 1) {
          this.othersArr = jsonResult.data.list;
          this.currentPage = jsonResult.data.currentPage;
          this.pageSize = jsonResult.data.pageSize;
          this.total = jsonResult.data.total;
        } else {
          let title = '操作失败';
          this.$alert(jsonResult.msg, title, {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      })
    },
    changePage(page) {
      this.currentPage = page
      this.OtherContent();
    },
    loadBannerList(){
      //请求所有轮播图数据
      this.axios
          .create({
            'headers':{
              'Authorization': localStorage.getItem('localJwt')
            }
          })
          .get("http://localhost:8080/v1/banners/1").then((response)=> {
        if (response.data.code==1){
          this.bannerArr = response.data.data;
        }
      })
    },
  },
  mounted() {
    this.loadContentDetail();
    this.loadCommentList();
    this.loadBannerList();
  }
}
</script>

<style>
a{text-decoration: none;font-size: 14px;text-align: center}
a:link{color:#cccccc }
a:hover{color: white}
.center{width: 1200px;margin: 0 auto}
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
ul{
  list-style-type: none;
  overflow: hidden;/*解决高度为0 导致的异常*/
}
li{
  float: left;
  margin-right: 10px;
}
.el-menu-item{
  margin: 0 35px;
}
.el-avatar--circle{
  vertical-align: bottom;
}
.con{
  margin: 0;
  padding: 0;
  eight: 25px;
  line-height: 25px;
}
li.el-menu-item.con{
  height:30px;
}


</style>